<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Influx project</title>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<script type="text/javascript" src="scripts/custom.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
</head>

<!--this starts all of the magic coming from the custom.js file-->
<body onLoad= "initialize()">

<!--the wrapper is what floats the whole website in the middle of your screen-->
<div class="wrapper">

<!--the banner is a place for you to customize and add your library's branding-->
<header class="banner">
	<div class="bannerleft">
    <img src="images/graybadge.png" alt="pic1" />
    
    <h1>Library Name</h1>
    </div>
    <div class="bannerright" style="font-size:20px">
    <strong>
    <br><a href="#" onClick="showhours()">Hours</a>
    <br><a href="#" onClick="showlocations()">Locations</a>
    <br>
    <a href="#"> My Account</a>
    </strong>
    </div>
</header>

<!--this section has your search box.  you'll want to connect this to your ILS.-->
<section id="searchwrapper">
<form>
	<input id="searchbox" type="text" value="search for books, movies, music and more..." />
	<input type="image" name="submit" id="submit" src="images/find.png" />
</form>
</section>

<!--this is the green back button that you see when you go to either the 'locations' or 'hours' options.  It is hidden on page load, but the visibility is triggered when you click on those bits-->
<section class="revealall" id="backbutton">
    <h1 class="blocktitle green" style="color:#FFF">Go Back to the Main Menu</h1>
</section>

<!--rotating banner on the top of the page-->
<div class="toprotatorspacer">&nbsp;
<div class="toprotator">
  <ul>
    <li class="show">
    <a href="javascript:void(0)">
    <img src="images/banner_1.jpg" alt="pic1" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/banner_2.jpg" alt="pic2" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/banner_3.jpg" alt="pic3" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/banner_4.jpg" alt="pic4" />
    </a>
    </li>
    <li>
    <a href="javascript:void(0)">
    <img src="images/banner_5.jpg" alt="pic4" />
    </a>
    </li>
  </ul>
</div>
</div>

<!----------------------------------------------------
this is the first of the seven toggling menu sections.
----------------------------------------------------->
<section class="block" id="primary_nav_one">
    <h1 class="blocktitle gray"><img src="images/expand.png" id="three">Recommended Books & Media</h1>   
    	<div class="blockcontent gray">
    	<div class="blocktext lightblue">
        <h2>&nbsp;&nbsp;&nbsp;Book of the day</h2>  
        <div class="clear">  	
            <a href="#" id="fictionone"><img src="http://syndetics.com/index.aspx?isbn=9780312628093/SC.GIF&client=sjose" class="titles"></a>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </div>
             <br>
         	<br>            
             <h2 id="lastweeksbooksh2"><img src="images/h2expand.png">&nbsp;&nbsp;This weeks picks</h2>            
             <section class="lastweeksbooks">
             <div class="clear">
            <a href="#" id="fictiontwo"><img src="http://syndetics.com/index.aspx?isbn=9780307379191/SC.GIF&client=sjose" class="titles"></a>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </div>
             <div class="clear">
            <a href="#" id="fictiontwo"><img src="http://syndetics.com/index.aspx?isbn=0780654285/SC.GIF&client=sjose" class="titles"></a>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </div>
             <div class="clear">
            <a href="#" id="fictiontwo"><img src="http://syndetics.com/index.aspx?isbn=0780639898/SC.GIF&client=sjose" class="titles"></a>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </div>
             <div class="clear">
            <a href="#" id="fictiontwo"><img src="http://syndetics.com/index.aspx?isbn=078063988X/SC.GIF&client=sjose" class="titles"></a>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </div>
             <div class="clear">
            <a href="#" id="fictiontwo"><img src="http://syndetics.com/index.aspx?isbn=9780312644765/SC.GIF&client=sjose" class="titles"></a>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
             </div>
             </section>
            
        </div>   
    </div>
</section>

<!----------------------------------------------------
this is the second of the seven toggling menu sections.
----------------------------------------------------->
<section class="block" id="primary_nav_two">
    <h1 class="blocktitle gray"><img src="images/expand.png" id="one">Upcoming Events</h1>
        <div class="blockcontent gray"> 
        <div class="blocktext lightgray">
            <a href="#" id="eventone"><img src="images/event1.png" class="events"></a>
            <a href="#" id="eventtwo"><img src="images/event2.png" class="events"></a>
            <a href="#" id="eventthree"><img src="images/event3.png" class="events"></a>
            <div class="eventtext">   
            </div>
        </div>  
    </div>
</section>

<!----------------------------------------------------
this is the third of the seven toggling menu sections.
----------------------------------------------------->
<section class="block" id="primary_nav_three">
    <h1 class="blocktitle gray"><img src="images/expand.png" id="two">Kids, Teens, and Adults</h1>
        <div class="blockcontent gray"> 
        <div class="blocktext lightblue">
        <section class="col-33">
        <h2 id="kids"><img src="images/h2expand.png">&nbsp;&nbsp;For Kids</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
        	<section class="kidstext">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </section>
        </section>
        <section class="col-33">
        <h2 id="teens"><img src="images/h2expand.png">&nbsp;&nbsp;For Teens</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
        	<section class="teenstext">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            </section
        ></section>
        <section class="col-33">
        <h2 id="adults"><img src="images/h2expand.png">&nbsp;&nbsp;For Adults</h2>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
        	<section class="adultstext">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </section
        ></section>  
        </div>      
    </div>
</section>

<!----------------------------------------------------
this is the fourth of the seven toggling menu sections.
----------------------------------------------------->
<section class="block" id="primary_nav_four">
    <h1 class="blocktitle gray"><img src="images/expand.png" id="four" onClick="librarycard()">Get a Library Card</h1>  
    	<div class="blockcontent gray">
    	<div class="blocktext lightgray">
        	<h2 id="card" style="color:#F30;"><img src="images/h2expand.png">&nbsp;&nbsp;How to get a card</h2>
            <div class="cardtext">           
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.           
      		</div>
            <h2 id="other" style="color:#F30;"><img src="images/h2expand.png">&nbsp;&nbsp;How to do all kinds of stuff</h2>
            <p id="othertext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <h2 id="thirdchoice" style="color:#F30;"><img src="images/h2expand.png">&nbsp;&nbsp;Another Option</h2>
            <p id="thirdchoicetext">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </div>
</section>

<!----------------------------------------------------
this is the fifth of the seven toggling menu sections.
----------------------------------------------------->
<section class="block" id="primary_nav_five">
    <h1 class="blocktitle gray"><img src="images/expand.png" id="five">Research and Reference</h1>
        <div class="blockcontent gray"> 
        <div class="blocktext lightblue">
			<h2 id="health"><img src="images/h2expand.png">&nbsp;&nbsp;Find Health Information</h2>
                <section class="healthtext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </section>
            <h2 id="company"><img src="images/h2expand.png">&nbsp;&nbsp;Find Company Information</h2>
                <section class="companytext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </section>
            <h2 id="encyclopedias"><img src="images/h2expand.png">&nbsp;&nbsp;Encyclopedias</h2>
                <section class="encyclopediastext">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </section>
        </div>  
    </div>
</section>

<!----------------------------------------------------
this is the sixth of the seven toggling menu sections.
----------------------------------------------------->
<section class="block" id="primary_nav_six">
    <h1 class="blocktitle gray"><img src="images/expand.png" id="six">Other Library Services</h1>
        <div class="blockcontent gray"> 
        <div class="blocktext lightgray">
			All of the other stuff the library does.  Small biz services, random grant funded programs, whatever.
        </div>  
    </div>
</section>

<!----------------------------------------------------
this is the seventh of the seven toggling menu sections.
----------------------------------------------------->
<section class="block" id="primary_nav_seven">
    <h1 class="blocktitle gray"><img src="images/expand.png" id="seven">Contact Us</h1>
        <div class="blockcontent gray"> 
        <div class="blocktext lightgray">
		<h2>Call us at 555-5555</h2>
        <h2>Email Us at blablabla@blabla.org</h2>
        <h2>IM Us somewhere</h2>
        <h2>Text Us somehwere else</h2>
        <h2>Browse the Staff Directory</h2>
        <br>
        <h2><a href="#"><img src="images/facebook.png" alt="facebook"></a>
            <a href="#"><img src="images/twitter.png" alt="twitter"></a>
            <a href="#"><img src="images/flickr.png" alt="flickr"></a>
            <a href="#"><img src="images/youtube.png" alt="youtube"></a> 
        </h2>         
        </div>  
    </div>
</section>

<!--hours section is hidden on page load-->
<section class="block" id="primary_nav_eight">
    <h1 id="hours" class="blocktitle gray">Hours</h1>
        <div class="staticblockcontent gray"> 
        <div class="staticblocktext lightgray">
			A basic list of all the library locations' hours.
        </div>  
    </div>
</section>

<!--locations section is hidden on page load-->
<section class="block" id="primary_nav_nine">
    <h1 id="locations" class="blocktitle gray">Locations</h1>
        <div class="staticblockcontent gray"> 
        <div class="staticblocktext lightgray">
        <div id="mapcolumn">
			<img src="http://maps.google.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=14&size=512x512&maptype=roadmap
&markers=color:red|label:A|40.702147,-74.015794&markers=color:red|label:B|40.711614,-74.012318
&markers=color:red|color:red|label:C|40.718217,-73.998284&sensor=false">
</div>
<div id="maplocationscolumn">
<h2>Library Location 1</h2>
<h2>Library Location 2</h2>
<h2>Library Location 3</h2>
<h2>Library Location 4</h2>
<h2>Library Location 5</h2>
<h2>Library Location 6</h2>
        </div>
        </div>
        </div>
</section>

<!--fat footer with your customizable options-->
<div class="cleargroup">
    <section id="fatfooterblock">
    	<div class="fatfooterleft">
        <a href="index.html">Full Width Version</a>
        <br>
        <a href="rotatingsidebar.html">Rotating Sidebar Version</a>
        <br>
        <a href="rotatingbanner.html">Full Width with Banner</a>
        <br>
        <a id="show-panel" href="#">Change the theme</a>
        </div>
        <div class="fatfooterright">
      	<img src="images/influxlogo.png">
        </div>
    </section>
</div>

<!--this is the page loading animation-->
<div id="loading-mask">
	<div id="loadmask-panel">
    <h1>One-pager is loading...</h1>
    <br>
    <h1><img src="images/influxlogo.png">  </h1>
    <br>
    <h1><img src="images/ajax-loader.gif">  </h1>
    </div>
</div>  
 
<!--this is the overlay that shows up when you want to change the theme-->    
<div id="lightbox-panel">  
<h2 align="center">Choose your look</h2>  
<p>
<a class="close-panel" onClick="orangetheme()"><img src="images/orangetheme.png"></a>
</p> 
<p>
<a class="close-panel" onClick="negativetheme()"><img src="images/blacktheme.png"></a>
</p>  
<p>
<a class="close-panel" onClick="normaltheme()"><img src="images/normaltheme.png"></a>
</p>   
<p align="center">  
</p>  
</div> 
<div id="lightbox"> 
</div>

</div> 

</body>
</html>